<template>
    <div class="wrapper login">
        <mt-header title="登录" rightName="注册" rightPath="/register" leftName="login"/>
        <div class="banner">
		    <div class="img"><img src="static/default-headImg.png"></div>
            <mt-navbar v-model="active">
                <mt-tab-item id="tab1">密码登录</mt-tab-item>
                <mt-tab-item id="tab2">验证码登录</mt-tab-item>
            </mt-navbar>
        </div>
        <mt-tab-container v-model="active">
            <mt-tab-container-item id="tab1">
                <div class="list">
                    <div class="inputPhone">
                        <mt-field placeholder="请输入手机号" type="number" v-model="inputValuePhone1"></mt-field>
                    </div>
                    <inputPwd @sendPwdToParent="getPwdFromChild"></inputPwd>
                </div>
                <div class="default-btn">
                    <mt-button type="primary" size="large" :disabled="(inputValuePhone1&&inputValuePwd)?false:true" @click.native="handleLogin(1)">登录</mt-button>
                </div>
                <div class="forgotPwd" @click="$router.push('/findpwd')">忘记密码</div>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab2">
                <div class="list">
                    <div class="inputPhone">
                        <mt-field placeholder="请输入手机号" type="number" v-model="inputValuePhone2"></mt-field>
                    </div>
                    <div class="countdown">
                        <countdown @sendValueToParent="getValueFromChild" :mobile="inputValuePhone2"></countdown>
                    </div>
                </div>
                <div class="default-btn">
                    <mt-button type="primary" size="large" :disabled="(inputValuePhone2&&inputValueCode)?false:true" @click.native="handleLogin(2)">登录</mt-button>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import mtHeader from "@/components/Header"
import countdown from "@/components/Countdown"
import inputPwd from "@/components/InputPwd/index"
import { Toast } from 'mint-ui';
import { validatePhone } from '@/utils/validate'
export default {
    name: 'App',
    data(){
        return {
            active :'tab1',
    
            inputValuePhone1:'',
            inputValuePwd:'',

            inputValuePhone2:'',
            inputValueCode:'',

            data:{}
        }
    },
    components:{
        mtHeader,
        countdown,
        inputPwd
    },
    methods:{
        ...mapActions('user', [
            'get_login_data'
        ]),
        getValueFromChild(value){
            this.inputValueCode = value;
        },
        getPwdFromChild(value){
            this.inputValuePwd = value;
        },
        handleLogin(type){
            var data = {}
            if( type == 1 ){
                // 密码登录
                data = {
                    mobile : this.inputValuePhone1,
                    loginPassword : this.inputValuePwd
                }
            }else{
                // 验证码登录
                data = {
                    mobile : this.inputValuePhone2,
                    validationCode : this.inputValueCode
                }
            }

            if( validatePhone(data.mobile) ){
                this.get_login_data(data).then(res => {
                    if( res.code == 200 ){
                        // 从登录页跳到主页
                        this.$router.push('/home');
                    }else{
                        Toast({
                            message: res.msg,
                            iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                        })
                    }
                })
            }else{
                Toast({
                    message: '请输入正确格式的手机号',
                    className: 'innputPhoneToast'
                });
            }
        }
    }
}
</script>


<style lang="stylus" scoped>
.wrapper{
    height:100%;
    .banner{
        height:205px;
        padding-top:90px;
        background:linear-gradient(180deg,rgba(70,95,247,1),rgba(94,135,255,1));
        position:relative;
        .img{
			margin:0 auto;
			max-width:60px;
		}
    }
    .forgotPwd{
        font-size:12px;
        color:#5F88FF;
        margin-top:20px; 
        padding-left:26px;
    }
}
</style>
